<template>
  <div class="employees-detail-container">
    <div class="app-container">
      <el-card>
        <!-- 放置表单 -->
        <el-form
          ref="userForm"
          :model="userInfo"
          :rules="rules"
          label-width="120px"
          style="margin-left: 120px; margin-top: 30px"
        >
          <el-form-item prop="username" label="姓名:">
            <el-input v-model="userInfo.username" style="width: 300px" />
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="userInfo.mobile" style="width: 300px" disabled />
          </el-form-item>
          <el-form-item prop="timeOfEntry" label="入职时间">
            <el-date-picker
              v-model="userInfo.timeOfEntry"
              type="date"
              class="inputW"
            />
          </el-form-item>
          <el-form-item label="员工头像">
            <ImgUokoad ref="refstaffPhoto" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editFn">更新</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getUserInfoByIdApi } from '@/api/user'
import { editEmployeesSimleApi } from '@/api/employees'
export default {
  name: 'EmployeesDetail',
  data() {
    return {
      userInfo: {
        username: '',
        mobile: '',
        timeOfEntry: '',
        staffPhoto: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名不可为空', trigger: 'blur' }
        ],
        timeOfEntry: [
          { required: true, message: '入职时间不可为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    userId() {
      // id是因为路由里面的id
      // 动态路由用params
      // 如果用?就用query
      // return this.$route.query
      return this.$route.params.id
    }
  },
  created() {
    this.getUserInfoByIdFn()
  },
  methods: {
    async getUserInfoByIdFn() {
      const res = await getUserInfoByIdApi(this.userId)
      console.log(res, '1111')
      this.userInfo = res.data
      // 回显拿到数据把他放到fileList里面进行回显
      // 因为fileList拿到的就是数组里面包对象的形式，所以要以这种形式传递
      this.$refs.refstaffPhoto.fileList = [{ url: res.data.staffPhoto }]
      console.log(this.$refs.refstaffPhoto.fileList, '88888888')
    },
    editFn() {
      this.$refs.userForm.validate(async(flag) => {
        if (!flag) return
        // 先获取组件
        const staffPhoto = this.$refs.refstaffPhoto
        // 先拿上传之后的图片地址
        // 问一下前面的对象为不为空，为空不向后执行，不为空才执行
        // ？是可选量
        // 单独上传取第一项
        const url = staffPhoto.fileList[0]?.url// 拿到url
        console.log(staffPhoto.fileList, 'gggg')// 获取到的是一个【0】的对象，里面有url
        // 判断url有没有值
        if (!url) {
          this.$message.warning('图片未上传，请上传图片')
        }
        //  把图片地址赋值给需要的参数
        // 图片如果么有上传成功，点击更新就给一个提示
        if (!staffPhoto.isAllUpploadSuccess) {
          this.$message.warning('还有图片正在上传，请稍后提交')
          return // 阻止后面逻辑执行
        }
        // id是由 this.userInfo 接收数据时里面有id数据
        // 把图片地址赋值给接口所需要的字段
        this.userInfo.staffPhoto = url
        await editEmployeesSimleApi(this.userInfo)
        this.$message.success('更新成功')
      })
    }
  }
}
</script>
